
<template>
  <div>

    <!-- 条件搜托条 -->
    <div class="topSearch">
      <div class="leftBox">
        <div class="searchbox">
        <em>学生姓名/身份证号：</em>
        <el-input v-model="searchBox.nameorcard" size="small" style="width:250px" placeholder="请输入学生姓名或身份证号"></el-input>
        </div>
        <div class="searchbox">
        <el-button type="primary" @click="getList" size="mini">查询</el-button>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <div class="contentBox">
      <el-table :data="studentPayList" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
        <el-table-column prop="studentName" label="学生姓名" width="120">
          <!-- <template slot-scope="scope">
              <strong style="color:#ff6910; font-size:16px;">{{scope.row.studentName}}</strong>
            </template> -->
        </el-table-column>
        <el-table-column prop="identityCardNumber" label="身份证号" width="200"></el-table-column>
        <el-table-column prop="schoolName" label="报名学校" width="180"></el-table-column>
        <el-table-column prop="gradeName" label="就读年级"></el-table-column>
        <el-table-column label="是否插班生" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.isShiftIn=='1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalScore" label="中考裸分" width="80"></el-table-column>
        <el-table-column prop="preBonusScore" label="预报名加分" width="100"></el-table-column>
        <el-table-column prop="bonusScore" label="政策加分" width="80"></el-table-column>
        <!-- <el-table-column prop="termCount" label="剩余学期数"></el-table-column> -->
        <!-- <el-table-column prop="myScore" label="升学成绩总分"></el-table-column> -->
        <el-table-column prop="payableMoney" label="应收总计">
          <template slot-scope="scope">
          <span v-if="scope.row.payableMoney==''||scope.row.payableMoney==null||scope.row.payableMoney==undefined">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.payableMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="specialAmount" label="标准金额（系统计算）" width="180">
          <template slot-scope="scope">
          <span v-if="scope.row.specialAmount==''||scope.row.specialAmount==null||scope.row.specialAmount==undefined">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.specialAmount?scope.row.specialAmount:0).toFixed(2)*1000<0}" v-else>{{scope.row.specialAmount|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paidMoney" label="实收总计">
          <template slot-scope="scope">
          <span v-if="scope.row.paidMoney==''||scope.row.paidMoney==null||scope.row.paidMoney==undefined">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.paidMoney?scope.row.paidMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.paidMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="schoolScore" label="学校录取分数线"></el-table-column> -->
        <el-table-column label="操作" v-if="roleIs()" width="160">
          <template slot-scope="scope">
            <el-button  @click="supplement(scope.row)" type="primary" size="mini">补录</el-button>
            <el-button  @click="refund(scope.row)" type="primary" size="mini">退费</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :total="pageAll"></el-pagination>
      </div>
    </div>

    <!---------------- 特训费补录弹窗 ---------------->
    <el-dialog title="特训费补录" :visible.sync="dialogFormVisible">
      <div class="layerMaxHeight">
        <div class="layerBox">
          <div class="baseMessage">
            <ul>
              <li>
                <em>姓名：</em><strong style="color:#ff6a00; font-size:16px;">{{baseMes.studentName}}</strong>
              </li>
              <li>
                <em>年级：</em>
                {{baseMes.gradeName}}
              </li>
              <li>
                <em>标准金额：</em>
                {{baseMes.specialAmount|moneyStyle}}
              </li>
              <li>
                <em>应收金额：</em>
                {{baseMes.payableMoney|moneyStyle}}
              </li>
              <li>
                <em>欠缴金额：</em>
                {{baseMes.qiaojiao|moneyStyle}}
              </li>
            </ul>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="140px">
            <el-form-item label="请选择补录时间" prop="operateTime">
              <el-date-picker v-model="form.operateTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerFrozenTime" size="small" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="请填写现金金额" prop="money">
              <el-input-number v-model="form.money1" size="small" :class="{ 'fu' :parseFloat(form.money1?form.money1:0).toFixed(2)*1000<0 }" :precision="2" :controls="false" :step="0.01"></el-input-number><el-tag style="margin:0 10px;">{{form.money1 | hanStyle}}</el-tag>
            </el-form-item>
            <el-form-item label="凭据说明" v-if="showOrHide">
              <!-- <el-upload
                class="avatar-uploader"
                action="/common/file/upload"
                :show-file-list="false"
                :on-success="(a,b)=>handleAvatarSuccess(a,b)"
                :data="{fileType:'Tuition',flag:form.fileId==''?'ADD':'EDIT',fileId:form.fileId==''?'':form.fileId,studentId:form.studentId}"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="form.file" :src="imgLeft+baseMes.speciallyProof" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> -->
              <el-image v-for="(f,index1) in baseMes.fileListS" :key="index1" @click="showImgBig(imgLeft+f)" style="width: 100px; height: 100px" :src="imgLeft+f"></el-image>
            </el-form-item>
            <!-- FIXME:补充说明 -->
            <el-form-item label="补充说明">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.remark" maxlength="200" clearable show-word-limit></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSupplement">确 定</el-button>
      </div>
    </el-dialog>

    <!---------------- 特训费退费弹窗 ---------------->

    <el-dialog title="特训费退费" :visible.sync="dialogFormVisible1">
      <div class="layerMaxHeight">
        <div class="layerBox">
          <div class="baseMessage">
            <ul>
              <li>
                <em>姓名：</em><strong style="color:#ff6a00; font-size:16px;">{{baseMes.studentName}}</strong>
              </li>
              <li>
                <em>年级：</em>
                {{baseMes.gradeName}}
              </li>
              <li>
                <em>实收总计：</em>
                {{baseMes.paidMoney|moneyStyle}}
              </li>
              <li>
                <em>已退费总计：</em>
                {{baseMes.refundMoney|moneyStyle}}
              </li>
            </ul>
          </div>

          <el-form ref="form" :model="form" :rules="rules" label-width="140px">
            <el-form-item label="实际退费时间" prop="operateTime">
              <el-date-picker v-model="form.operateTime" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerFrozenTime" type="datetime" size="small" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="请选择退费区间" prop="refundBeginTime">
              <el-date-picker v-model="form.refundBeginTime" :picker-options="pickerOptionsBegin" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" default-time="00:00:00" size="small" placeholder="选择日期"></el-date-picker>~<el-date-picker v-model="form.refundEndTime"  :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" type="datetime" size="small" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="请填写金额" prop="money">
              <el-input-number v-model="form.money2" size="small" :precision="2" :controls="false" :class="{ 'fu' :parseFloat(form.money2?form.money2:0).toFixed(2)*1000<0 }" :step="0.01" :max="maxQian"></el-input-number><el-tag style="margin:0 10px;">{{form.money2 | hanStyle}}</el-tag>
            </el-form-item>
            <el-form-item label="退费审批单" prop="fileList">
              <el-upload
                class="upload-demo"
                action="/common/file/upload"
                :show-file-list="false"
                :on-success="(a,b)=>handleAvatarSuccessJMSP(a,b)"
                :before-upload="beforeAvatarUpload"
                :data="{fileType:'SpecialRefund',flag:form.fileId==''?'ADD':'EDIT',fileId:form.fileId==''?'':form.fileId,studentId:form.studentId}"
                style="width:250px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">附件可上传JPG，PNG格式</div>
              </el-upload>

            <div class="fileList">
                <ul>
                  <li v-for="(f,index) in fileList" :key="index">
                    <em>
                      <i class="el-icon-s-management"></i>
                    </em>
                    <div class="set">
                      <el-tooltip class="item" effect="dark" content="查看" placement="top">
                        <a class="down" @click="downlade(f.url)">
                          <i class="el-icon-view"></i>
                        </a>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <a class="drop" @click="dropFile(index)">
                          <i class="el-icon-close"></i>
                        </a>
                      </el-tooltip>
                    </div>
                    <div class="mes">
                      <p>{{f.name}}</p>
                    </div>
                  </li>
                </ul>
              </div>
              </el-form-item>
            <el-form-item label="补充说明">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.remark" maxlength="200" clearable show-word-limit></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="saveSupplement">确 定</el-button>
      </div>
    </el-dialog>


<el-image-viewer  v-if="showViewer" :on-close="closeViewer" :url-list="[url]" style="z-index:10000" />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: { ElImageViewer },
  data() {
    return {
      pageIndex:1,
      pageAll:0,
      dialogFormVisible:false,
      dialogFormVisible1:false,
      frozenTime:'',
      imgLeft:'',
      showViewer:false,
      showOrHide:false,
      url:'',
      maxQian:0,
      searchBox:{
        nameorcard:'',
      },
      baseMes: {},
      studentPayList:[],
      form:{
        studentId:'',
        paymentType:'',
        operateTime:'',
        createTime:'',
        money:0,
        money1:0,
        money2:0,
        remark:'',
        refundBeginTime:'',
        refundEndTime:'',
        file:'',
        fileId:'',
      },
      fileList:[],
      saveType:"",
      pickerOptionsBegin: {
        disabledDate: time => {
          return time.getTime() > new Date(this.form.refundEndTime).getTime();
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return time.getTime() < new Date(this.form.refundBeginTime).getTime();
        }
      },
      pickerFrozenTime: {
        disabledDate: time => {
          return time.getTime() <= new Date(this.frozenTime).getTime();
        }
      },
      rules:{
        operateTime:[{ type: 'date', required:true, message: '请选择日期', trigger: 'change' }],
        refundBeginTime:[{ type: 'string', required:true, message: '请选择日期', trigger: 'change' }],
        refundEndTime:[{ type: 'string', required:true, message: '请选择日期', trigger: 'change' }],
        money:[{ required: true, message: '金额不能为空'}],
        file:[{ required: true, message: '请上传凭证'}],
        fileList:[{ type: 'array', required: true, message: '请上传退费审批单', trigger: 'change' }],
      }
    }
  },
  filters:{
    moneyStyle(val){
      if(!val)return '0';
      var nm = 0;
      nm = parseFloat(val).toFixed(2)*1000/1000;
      return nm;
    },
    hanStyle(money){
      var cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
          var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
          var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
          var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
          var cnInteger = "整"; //整数金额时后面跟的字符
          var cnIntLast = "元"; //整型完以后的单位
          var maxNum = 999999999999999.9999; //最大处理的数字
          var IntegerNum; //金额整数部分
          var DecimalNum; //金额小数部分
          var ChineseStr = ""; //输出的中文金额字符串
          var parts; //分离金额后用的数组，预定义
          var Symbol="";//正负值标记
          money = parseFloat(money);
          if (money==='') {
              return "";
          }
          if (money >= maxNum) {
              alert('超出最大处理数字');
              return "";
          }
          if (money == 0) {
              ChineseStr = cnNums[0] + cnIntLast + cnInteger;
              return ChineseStr;
          }
          if(money<0)
          {
              money=-money;
              Symbol="负 ";
          }
          money = money.toString(); //转换为字符串
          if (money.indexOf(".") == -1) {
              IntegerNum = money;
              DecimalNum = '';
          } else {
              parts = money.split(".");
              IntegerNum = parts[0];
              DecimalNum = parts[1].substr(0, 4);
          }
          if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
              var zeroCount = 0;
              var IntLen = IntegerNum.length;
              for (var i = 0; i < IntLen; i++) {
                  var n = IntegerNum.substr(i, 1);
                  var p = IntLen - i - 1;
                  var q = p / 4;
                  var m = p % 4;
                  if (n == "0") {
                      zeroCount++;
                  }
                  else {
                      if (zeroCount > 0) {
                          ChineseStr += cnNums[0];
                      }
                      zeroCount = 0; //归零
                      ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                  }
                  if (m == 0 && zeroCount < 4) {
                      ChineseStr += cnIntUnits[q];
                  }
              }
              ChineseStr += cnIntLast;
              //整型部分处理完毕
          }
          if (DecimalNum != '') { //小数部分
              var decLen = DecimalNum.length;
              for (var i = 0; i < decLen; i++) {
                  var n = DecimalNum.substr(i, 1);
                  if (n != '0') {
                      ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
                  }
              }
          }
          if (ChineseStr == '') {
              ChineseStr += cnNums[0] + cnIntLast + cnInteger;
          } else if (DecimalNum == '') {
              ChineseStr += cnInteger;
          }
          ChineseStr = Symbol +ChineseStr;
          return ChineseStr;
    }
  },
  mounted() {
    var that = this;
    that.$nextTick(()=>{
      // console.log(that.$store.state.userModule.roleList);
      // that.roleIs();
      that.getList();
      that.GetPaymentOperation();
    })
  },
  methods: {
    // 时间设置
    setDate(){
      var stime = new Date();
      var ftime = new Date(this.frozenTime);
      if((new Date(this.frozenTime).getFullYear()==new Date().getFullYear())&&(new Date(this.frozenTime).getMonth()==new Date().getMonth())&&(new Date(this.frozenTime).getDate()==new Date().getDate())){
        // this.form.operateTime =  new Date(stime.valueOf()+1*24*60*60*1000).getFullYear()+'-'+(new Date(stime.valueOf()+1*24*60*60*1000).getMonth()+1).toString().padStart(2,'0')+'-'+(new Date(stime.valueOf()+1*24*60*60*1000).getDate().toString().padStart(2,'0'));
        this.form.operateTime = new Date(stime.setDate(stime.getDate()+1));
      }else if(stime.getTime()<ftime.getTime()){
        // this.form.operateTime = new Date(ftime.valueOf()+1*24*60*60*1000).getFullYear()+'-'+(new Date(ftime.valueOf()+1*24*60*60*1000).getMonth()+1).toString().padStart(2,'0')+'-'+(new Date(ftime.valueOf()+1*24*60*60*1000).getDate().toString().padStart(2,'0'));
        this.form.operateTime = new Date(ftime.setDate(ftime.getDate()+1));
      }else{
      // this.form.operateTime = stime.getFullYear()+'-'+(stime.getMonth()+1).toString().padStart(2,'0')+'-'+stime.getDate().toString().padStart(2,'0');
      this.form.operateTime = new Date();
      }
    },
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // 判断角色
    roleIs:function(){
      var rlList = JSON.parse(JSON.stringify(this.$store.state.userModule.roleList))
      var setshow =  true;
      for(var a=0,len=rlList.length;a<len;a++){
        if(rlList[a]=='GroupManager'||rlList[a]=='GroupManager'){
          setshow = false
        }
      }
      return setshow;
    },
    // 获取需缴纳学生列表
    getList:function(){
      this.$api.trainingReduction.GetPayForStudentList(this.searchBox.nameorcard,this.pageIndex).then(res=>{
        //console.log("获取需缴纳学生列表",res)
        this.studentPayList = res.data.result.list;
        this.pageIndex = res.data.result.page;
        this.pageAll = res.data.result.total;
      })
    },
    // 获取缴费操作
    GetPaymentOperation:function(){
      this.$api.trainingReduction.GetPaymentOperation().then(res=>{
        //console.log("获取缴费操作",res)
        this.frozenTime = res.data.result.frozenTime;
        var str = res.data.result.signUrl;
        // this.imgLeft = str.substring(0,str.length-1);
        this.imgLeft = str;
      })
    },
    // TODO:补录按钮
    supplement:function(obg){
      this.dialogFormVisible = true;
      this.form ={};
      this.baseMes = obg;
      this.saveType="1";
      this.qianjiao(obg);
      var formn = {
        studentId:obg.studentId,
        paymentType:'Supplement',
        operateTime:'',
        money:0,
        money1:0,
        money2:0,
        remark:'',
        file:'',
        fileId:'',
      }
      this.form = JSON.parse(JSON.stringify(formn));
      this.setDate()
      this.baseMes.fileListS = obg.speciallyProof.split(",");
      this.showOrHideSet();
    },
    // TODO:退费按钮
    refund:function(obg){
      this.dialogFormVisible1 = true;
      this.form ={};
      this.baseMes = obg;
      this.maxNum();
      this.saveType="2";
      this.fileList = [];
      var formn = {
        studentId:obg.studentId,
        paymentType:'Refund',
        operateTime:'',
        money:0,
        money1:0,
        money2:0,
        remark:'',
        refundBeginTime:'',
        refundEndTime:'',
        file:'',
        fileId:'',
      }
      this.form = JSON.parse(JSON.stringify(formn));
      this.setDate()
    },
    // 保存补录
    saveSupplement:function(){
      if(this.form.operateTime==''||this.form.operateTime==null||this.form.operateTime==undefined){
        this.$message({
          message:'请选择补录日期',
          type:'warning'
        })
        return;
      }

      if(this.form.paymentType=="Supplement")
      {
        this.form.money = this.form.money1;
      }else{
        this.form.money = this.form.money2;
      }

      var files =""
      if(this.saveType=="1"){
      //   if(this.form.fileId==""||this.form.fileId==null||this.form.fileId==undefined){
      //   this.$message({
      //     message:'请上传凭据说明',
      //     type:'warning'
      //   })
      //   return;
      // }
      if(this.form.file){
        files += this.form.fileId+',';
      }
      }else{
        if(this.fileList.length==0){
          this.$message({
            message:'请上传退费审批单',
            type:'warning'
          })
          return;
        }
      if(this.fileList.length!=0){
      for(var a = 0,len = this.fileList.length;a<len;a++){
        files += this.fileList[a].id+",";
      }
      }
      }

      if((parseFloat(this.form.money).toFixed(2)*1000)!= (parseFloat(this.baseMes.payableMoney).toFixed(2)*1000)){
        this.$confirm('现金金额与应缴金额不符, 是否继续?', '提示', {
          confirmButtonText: '确认提交',
          cancelButtonText: '返回修改',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '正在保存!'
          });
          this.$api.trainingReduction.SaveSupplement( this.baseMes.payableMoney,files,this.form).then(res=>{
            //console.log("保存补录返回",res);
            if(res.data.status=='SUCCESS'){
              this.$message({
                message:'操作成功',
                type:'success'
              })
              this.dialogFormVisible = false;
              this.dialogFormVisible1 = false;
              this.getList();
            }else{
              this.$message.error(res.data.message);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消保存'
          });
           return;
        });
      }else{
        this.$api.trainingReduction.SaveSupplement( this.baseMes.payableMoney,files,this.form).then(res=>{
        //console.log("保存补录返回",res);
          if(res.data.status=='SUCCESS'){
            this.$message({
              message:'操作成功',
              type:'success'
            })
            this.dialogFormVisible = false;
            this.dialogFormVisible1 = false;
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
        })
      }



    },
    // 分页页面切换
    handleCurrentChange:function(val){
      this.pageIndex = val;
      this.getList();
    },
    // 审批成功
    handleAvatarSuccessJMSP: function(res, file) {
      console.log(res);
      var fileSuccessObg = {
        id:res.result.id,
        name: this.getName(res.result.url),
        url: this.$store.state.userModule.phurl + res.result.url
      };
      this.fileList.push(fileSuccessObg);
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      this.form.fileId = res.result.id;
      this.form.file = res.result.url;
    },
    // 上传文件之前
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      var testmsg = /^image\/(jpeg|png|jpg|gif|bmp)$/.test(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!testmsg) {
          this.$message.error('上传审批图片是JPG,GIF,JPEG,PNG格式!');
        }
      if (!isLt2M) {
        this.$message.error("上传审批图片大小不能超过 2MB!");
      }
      return testmsg && isLt2M;
    },
    // 下载上传的附件
    downlade:function(url){
      window.open(url)
    },
    // 删除上传文件
    dropFile:function(suoyin){
      this.fileList.splice(suoyin,1);
    },
    // 获取名字
    getName:function(obj){
      var index = obj.lastIndexOf("\/");
      obj=obj.substring(index+1,obj.length)
      return obj;
    },
    // 退费最大值
    maxNum:function(){
      var maxmoney = 0;
      maxmoney = (parseFloat(this.baseMes.paidMoney==null?0:this.baseMes.paidMoney).toFixed(2)*1000-parseFloat(this.baseMes.refundMoney==null?0:this.baseMes.refundMoney).toFixed(2)*1000)/1000;
      // return maxmoney;
      this.maxQian = maxmoney;
    },
    // TODO:欠缴金额
    qianjiao:function(obg){
      console.log(obg);
      var qian =  0
      qian =(parseFloat(obg.payableMoney).toFixed(2)*1000 - parseFloat(obg.paidMoney==null?0:obg.paidMoney).toFixed(2)*1000)/1000;
      this.baseMes.qiaojiao = qian;
    },
    // 显示大图
    showImgBig:function(u){
      this.showViewer = true
      this.url = u
    },
    // 关闭大图查看
    closeViewer:function(){
      this.showViewer = false;
    },
    //TODO: 显示隐藏凭据说明
    showOrHideSet:function(){
      if( parseFloat(this.baseMes.payableMoney).toFixed(2)*1000 < parseFloat(this.baseMes.specialAmount).toFixed(2)*1000){
        this.showOrHide = true;
      }else{
        this.showOrHide = false;
      }
    },
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9!important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-image-viewer__close{ top: 80px; right: 80px; color: #FFF;}

.fu{ border: 1px solid #F30;}
</style>
